.<template>
  <div>
    <div class="header w100">
      <div class="img">《</div>

      <div class="text">兑换</div>
    </div>
    <div class="list w100">
      <span class="text2">星值兑换</span> <span class="text3">更多</span>
      <div class="img3">></div>
    </div>
    <ul class="ul w100">
      <li class="product">
        <img
          class="img4"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psakmykgks1rv9jyy9h2kb7lw3jf05lqlhd7b655a3-830e-4e24-9903-0a38e547c756"
        />
        <div class="text4">多功能升降煮茶器</div>
        <div class="group">
          <span class="text5">76.90星值</span>
          <button class="but">兑换</button>
        </div>
      </li>
      <li class="product">
        <img
          class="img4"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pszd811rfqtwvctuwwgyjus9qnnvfe7ycfcb94e5-4a80-4451-bd2b-b556365ea88c"
        />
        <div class="text4">充电式电动牙刷</div>
        <div class="group">
          <span class="text5">46.90星值</span>
          <button class="but">兑换</button>
        </div>
      </li>
      <li class="product">
        <img
          class="img4"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps1ugippixnzsy53vfkogoyr85sjyartlwbc198f5fc-c1ea-4d80-abd7-c59805fb8fae"
        />
        <div class="text4">无线充电榨汁机</div>
        <div class="group">
          <span class="text5">106.90星值</span>
          <button class="but">兑换</button>
        </div>
      </li>
      <li class="product">
        <img
          class="img4"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps5h5kredy4o6502oh6fylgo0wm4txefg65lbc182501-61fc-4f9f-8b68-669bf7dc647d"
        />
        <div class="text4">多功能料理机</div>
        <div class="group">
          <span class="text5">376.90星值</span>
          <button class="but">兑换</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

  
};
</script>

<style scoped>
.header {
  height: 1.4rem;
  display: flex;
  align-items: center;
}
.img {
  font-size: 0.5rem;
  margin-left: 0.2rem;
}
.text {
  width: 80%;
  height: 100%;
  font-size: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list {
  height: 1rem;
  display: flex;
  align-items: center;
}
.text2,
.text3 {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 0.4rem;
}
.text2 {
  width: 60%;
  text-indent: 0.3rem;
}
.text3 {
  width: 30%;
  justify-content: flex-end;
  color: rgb(189, 190, 192);
}
.img3 {
  font-size: 0.3rem;
  margin-left: 0.2rem;
  color: rgb(189, 190, 192);
}
.ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.product {
  box-shadow: 0px 0.07rem 0.2rem 0px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0.05rem;
  width: 40%;
  height: 4rem;
  margin-top: 0.3rem;
}

.img4 {
  width: 100%;
  height: 2.6rem;
}

.text4 {
  width: 100%;
  height: 0.6rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.4rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.6rem;
}

.group {
  width: 2.98rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.text5 {
  width: 60%;
  color: rgba(107, 164, 217, 1);
  font-size: 0.28rem;
  font-family: PingFangSC-Semibold;
}

.but {
  background-image: linear-gradient(
    -90deg,
    rgba(185, 182, 229, 1) 0,
    rgba(185, 182, 229, 1) 0,
    rgba(182, 220, 255, 1) 100%,
    rgba(182, 220, 255, 1) 100%
  );
  border-radius: 0.17rem;
  height: 0.6rem;
  width: 1rem;
  font-size: 0.3rem;
}
</style>